import React,{Component,Fragment} from 'react'
import axios from './../../axios'
import './detail.less'
import {Card,Button} from 'antd'

export default class OrderDetail extends Component {
    state = {}

    componentWillMount() {
        this.requestList()
    }

    requestList = () => {
        const orderId = this.props.match.params.orderId
        //订单详情
        axios.ajax({
            url:'/order/detail',
            params:{
                id:orderId
            }
        }).then(res => {
            if(res.code === 0) {
                this.setState({
                    orderDetailInfo:res.result
                })
                this.renderMap(res.result)
            }
        })
    }
    //地图标注
    addMarker = (point,imgUrl,map) => {  // 创建图标对象   
        var myIcon = new window.BMap.Icon(imgUrl, new window.BMap.Size(36, 42), {    
            // 指定定位位置。   
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
            // 图标中央下端的尖角位置。    
            anchor: new window.BMap.Size(18, 42),
            imageSize: new window.BMap.Size(36, 42),      
        });      
        // 创建标注对象并添加到地图   
        var marker = new window.BMap.Marker(point, {icon: myIcon});    
        map.addOverlay(marker);    
    }    

    renderMap = (data) => {
        //获取行车轨迹
        let position_list = data.position_list
        //设置起始地方
        let startBike = position_list[0]
        //开始经纬度
        let start_lon = startBike.lon
        let start_lat = startBike.lat

        let endBike = position_list[position_list.length-1]
        //结束经纬度
        let end_lon = endBike.lon
        let end_lat = endBike.lat
        // 创建地图实例
        var map = new window.BMap.Map("container");

        console.log(start_lon,start_lat,end_lon,end_lat)
        // 创建点坐标            
        var point = new window.BMap.Point(end_lon, end_lat); //以结束的点为中心
        // 初始化地图，设置中心点坐标和地图级别    
        map.centerAndZoom(point, 11);

        //将坐标转化成point
        let startBikepoint = new window.BMap.Point(start_lon, start_lat);
        this.addMarker(startBikepoint,"/assets/start_point.png",map)
        let endBikepoint = new window.BMap.Point(end_lon, end_lat);
        this.addMarker(endBikepoint,"/assets/end_point.png",map)

        //行车轨迹
        let position_list_point = []
        position_list.forEach(item => {
            const p = new window.BMap.Point(item.lon,item.lat)
            return position_list_point.push(p)
        })
        var polyline = new window.BMap.Polyline(position_list_point,
            {
                strokeColor:"#ef4136", //设置线样式
                strokeWeight:3, 
                strokeOpacity:1
            }
        );
        map.addOverlay(polyline);

        //绘制服务区域
        let area = data.area
        let area_point = []
        area.forEach(item => {
            let p = new window.BMap.Point(item.lon,item.lat)
            return area_point.push(p)
        })
        var polyline = new window.BMap.Polyline(area_point,
            {
                // strokeColor:"#ef4136", //设置线样式
                // strokeWeight:5, 
                // strokeOpacity:1,
                // fillColor:'#ff8605',
                // fillOpacity:0.4
                strokeColor: "#CE0000",
                strokeWeight: 4,
                strokeOpacity: 1,
                fillColor: "#ff8605",
                fillOpacity:0.4
            }
        );
        map.addOverlay(polyline);

        

        //控件显示位置 右上角
        let opts = {anchor:window.BMAP_ANCHOR_TOP_RIGHT}
        //地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件
        map.addControl(new window.BMap.NavigationControl(opts));    
        map.addControl(new window.BMap.ScaleControl(opts));    
        map.addControl(new window.BMap.OverviewMapControl(opts));
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);      
        
        
    }
    render() {
        const info = this.state.orderDetailInfo || {};
        return (
            <Fragment>
                <Card>
                    <Button type = "primary">原始轨迹</Button>
                </Card>
                <div id="container" style={{height:500}}></div>
                <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-content">{info.mode == 1 ?'服务区':'停车点'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-content">{info.order_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-content">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-content">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-content">{info.mobile}</div>
                            </li>
                        </ul>
                    </div>
                    <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行程起点</div>
                                <div className="detail-form-content">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行程终点</div>
                                <div className="detail-form-content">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶里程</div>
                                <div className="detail-form-content">{info.distance/1000}公里</div>
                            </li>
                        </ul>
                    </div>
            </Fragment>
        )
    }
}